<template>
	<view class="rating-container">
		<uv-icon :name="imgUrl" size="30"/>
		<span class="rating-label">{{ label }}</span>
		<view class="stars">
			<span v-for="star in maxStars" :key="star" class="star" :class="{ 
          'filled': star <= currentRating,
          'half': allowHalf && star - 0.5 === currentRating,
          'readonly': readonly
        }" @click="!readonly && setStar(star)" @mouseover="!readonly && (hoverRating = star)"
				@mouseleave="!readonly && (hoverRating = 0)" :style="{
          fontSize: size + 'px',
          color: star <= (hoverRating || currentRating) ? activeColor : inactiveColor
        }">
				{{ star <= (hoverRating || currentRating) ? '★' : '☆' }}
			</span>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const props = defineProps({
		modelValue: {
			type: Number,
			default: 0
		},
		imgUrl: {
			type: String,
			default: ''
		},
		label: {
			type: String,
			default: '综合评分'
		},
		maxStars: {
			type: Number,
			default: 5
		},
		size: {
			type: Number,
			default: 24
		},
		activeColor: {
			type: String,
			default: '#ffc107'
		},
		inactiveColor: {
			type: String,
			default: '#ccc'
		},
		readonly: {
			type: Boolean,
			default: false
		},
		allowHalf: {
			type: Boolean,
			default: false
		}
	});

	const emit = defineEmits(['change']);

	const hoverRating = ref(0);
	const currentRating = ref(props.modelValue);

	const setStar = (rating) => {
		currentRating.value = rating;
		emit('change', rating);
	};
</script>

<style scoped>
	.rating-container {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 10px;
	}

	.rating-label {
		font-size: 16px;
		color: #333;
	}

	.stars {
		display: flex;
	}

	.star {
		cursor: pointer;
		transition: color 0.2s;
		padding: 0 5px;
	}

	.star.readonly {
		cursor: default;
	}
</style>